<template>
  <div id="app">
    <button @click="active = 'BMapShow'">显示 BMapShow</button>
    <button @click="active = 'BMapOverlay'">显示 BMapOverlay</button>
    <button @click="active = 'BMapLayer'">显示 BMapLayer</button>

    <component :is="active" />
  </div>
</template>

<script>
import BMapShow from '@/components/BMapShow.vue'
import BMapOverlay from '@/components/BMapOverlay.vue'
import BMapLayer from '@/components/BMapLayer.vue'

export default {
  name: 'App',
  components: { BMapShow, BMapOverlay, BMapLayer },
  data() {
    return {
      active: 'BMapShow'
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>

<!-- 
<template>
  <div id="app">
    <button @click="load('show')">加载 BMapShow</button>
    <button @click="load('overlay')">加载 BMapOverlay</button>

    <component :is="current" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      current: null
    }
  },
  methods: {
    load(type) {
      if (type === 'show') {
        import('@/components/BMapShow.vue').then(mod => {
          this.current = mod.default
        })
      } else if (type === 'overlay') {
        import('@/components/BMapOverlay.vue').then(mod => {
          this.current = mod.default
        })
      }
    }
  }
}
</script> -->